<template>
    <div id="app" style="position: relative;height: 100%;width: 100%">
        <navBar></navBar>
        <div v-show="homeImageCounter===homeImageLoadedCounter||($route.path!='/'&&$route.path!='/discover')" >
            <div class="container">
                <subMenu></subMenu>

                <router-view></router-view>
            </div>
            <home_footer></home_footer>
        </div>
        <loading v-show="homeImageCounter!=homeImageLoadedCounter"></loading>
        <player></player>
    </div>
</template>

<script>
    import subMenu from '@/components/subMenu'
    import navBar from './components/navBar'
    import home_footer from './components/home_footer'
    import player from './components/player'
    import {mapState} from 'vuex';
    import loading from './components/loading';
    // import store from 'store'
    export default {
        name: 'App',
        data() {
            return {
                isReady: false
            }
        },
        components: {navBar, home_footer, player,loading,subMenu},
        created() {

        },
        mounted() {
        },
        methods: {},
        computed:{
            ...mapState({
                homeImageCounter:(state)=>state.homeImageCounter,
                homeImageLoadedCounter:(state)=>state.homeImageLoadedCounter
            }),
        }
    }
</script>

<style lang="scss">
    html, body {
        width: 100%;
        height: 100%;
    }

    a {
        text-decoration: none;

        &:hover, &:link, &:active, &:visited {
            text-decoration: none;
        }
    }
</style>
